<template>
	<div class="h-[calc(100vh-120px)] overflow-auto">
		<div class="mb-[10px] flex items-center gap-4">
			门店：
			<el-select
				v-model="shopId"
				placeholder="全部"
				style="max-width: 120px; min-width: 100px"
			>
				<el-option label="全部" value=""></el-option>
				<template v-for="item in dict.get('Shop').value" :key="item.value">
					<el-option :label="item.name" :value="item.value" />
				</template>
			</el-select>
			预约类型：
			<el-select
				v-model="visitType"
				placeholder="全部"
				style="max-width: 120px; min-width: 100px"
			>
				<el-option label="全部" value="0,1"></el-option>
				<el-option label="新客" value="0"></el-option>
				<el-option label="复查" value="1"></el-option>
			</el-select>
			渠道：
			<el-select
				v-model="channelId"
				placeholder="全部"
				style="max-width: 120px; min-width: 100px"
			>
				<el-option label="全部" value=""></el-option>
				<template v-for="item in dict.get('Source').value" :key="item.value">
					<el-option :label="item.name" :value="item.value" />
				</template>
			</el-select>
			<el-date-picker
				v-model="dateRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:shortcuts="shortcuts"
				value-format="YYYY-MM-DD"
				class="!w-auto min-w-[240px] max-w-[360px]"
			/>
			<cl-export-btn :columns="exportColumns" :data="tableData" filename="到店转化数据" />
		</div>
		<!-- 添加表格组件 -->
		<el-table :data="tableData" border style="width: 100%" :span-method="handleSpanMethod">
			<el-table-column prop="shopName" label="门店" width="120" align="center" />
			<el-table-column prop="date" label="日期" width="120" align="center" />
			<el-table-column label="预约" width="80" align="center">
				<template #default="{ row }">
					{{ row.appoint }}
				</template>
			</el-table-column>
			<!-- <el-table-column label="到店人数" width="180" align="center"> -->
				<!-- <el-table-column prop="sign_first" label="首次" width="70" align="center" />
				<el-table-column prop="sign_second" label="非首次" width="70" align="center" /> -->
				<el-table-column prop="sign_total" label="到店人数" width="100" align="center" />
			<!-- </el-table-column> -->
			<!-- <el-table-column label="签约人数" width="180" align="center"> -->
				<!-- <el-table-column prop="buy_first" label="首次" width="70" align="center" />
				<el-table-column prop="buy_second" label="非首次" width="70" align="center" /> -->
				<el-table-column prop="buy_total" label="签约人数" width="100" align="center" />
			<!-- </el-table-column> -->
			<el-table-column label="签约金额" min-width="120" align="center">
				<!-- <el-table-column label="首次" width="120" align="center">
					<template #default="{ row }">
						{{ Number(row.money_first).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="非首次" width="120" align="center">
					<template #default="{ row }">
						{{ Number(row.money_second).toFixed(2) }}
					</template>
				</el-table-column> -->
				<!-- <el-table-column label="汇总" width="120" align="center"> -->
					<template #default="{ row }">
						{{ Number(row.money_total).toFixed(2) }}
					</template>
				<!-- </el-table-column> -->
			</el-table-column>
			<el-table-column label="到店率" width="120" align="center">
				<template #default="{ row }"> {{ row.sign_rate }}% </template>
			</el-table-column>
			<el-table-column label="转化率" width="120" align="center">
				<!-- <el-table-column label="首次" width="120" align="center">
					<template #default="{ row }"> {{ row.conversion_first_rate }}% </template>
				</el-table-column>
				<el-table-column label="非首次" width="120" align="center">
					<template #default="{ row }"> {{ row.conversion_second_rate }}% </template>
				</el-table-column> -->
				<!-- <el-table-column label="汇总" width="120" align="center"> -->
					<template #default="{ row }"> {{ row.conversion_total_rate }}% </template>
				<!-- </el-table-column> -->
			</el-table-column>
			<el-table-column label="客单价" min-width="100" align="center">
				<!-- <el-table-column label="首次" width="120" align="center">
					<template #default="{ row }">
						{{ Number(row.customer_first_price).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="非首次" width="120" align="center">
					<template #default="{ row }">
						{{ Number(row.customer_second_price).toFixed(2) }}
					</template>
				</el-table-column> -->
				<!-- <el-table-column label="汇总" width="120" align="center"> -->
					<template #default="{ row }">
						{{ Number(row.customer_total_price).toFixed(2) }}
					</template>
				<!-- </el-table-column> -->
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'appointment-board'
});

import { useCool } from '/@/cool';
import { onMounted, ref, watch, computed } from 'vue';
import { useDict } from '/$/dict';

const { service } = useCool();
const { dict } = useDict();
const tableData = ref([]);
const columns = ref([]);
const shopId = ref('');
const channelId = ref('');
const visitType = ref('0,1');
// 添加日期范围变量
const dateRange = ref([]);
// 添加快捷选项
const shortcuts = [
	{
		text: '最近一周',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		}
	},
	{
		text: '最近一个月',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		}
	},
	{
		text: '最近三个月',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		}
	}
];

const exportColumns = computed(() => {
	return [
		{
			label: '门店',
			prop: 'shopName'
		},
		{
			label: '日期',
			prop: 'date'
		},
		{
			label: '预约',
			prop: 'appoint'
		},
		{
			label: '到店人数',
			prop: 'sign_total'
		},
		{
			label: '签约人数',
			prop: 'buy_total'
		},
		{
			label: '签约金额',
			prop: 'money_total'
		},
		{
			label: '到店率',
			prop: 'sign_rate'
		},
		{
			label: '转化率',
			prop: 'conversion_total_rate'
		},
		{
			label: '客单价',
			prop: 'customer_total_price'
		}
	];
});

// 监听就诊类型变化
watch(shopId, () => {
	getData();
});

watch(channelId, () => {
	getData();
});

watch(visitType, () => {
	getData();
});

// 监听日期范围变化
watch(dateRange, () => {
	getData();
});

onMounted(async () => {
	getData();
});

// 获取数据
function getData() {
	const params: any = {
		shopId: shopId.value,
		channelId: channelId.value,
		appointmentType: visitType.value
	};

	// 添加日期范围参数
	if (dateRange.value && dateRange.value.length === 2) {
		params.startTime = dateRange.value[0];
		params.endTime = dateRange.value[1];
	}

	service.appointment.info.appointBoard(params).then(res => {
		tableData.value = res;
	});
}

// 添加处理合并单元格的方法
const handleSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	// 只处理门店列的合并
	if (columnIndex === 0) {
		if (rowIndex === 0) {
			// 获取当前行的门店名称
			const shopName = row.shopName;
			// 计算相同门店的行数
			let count = 1;
			for (let i = 1; i < tableData.value.length; i++) {
				if (tableData.value[i].shopName === shopName) {
					count++;
				} else {
					break;
				}
			}
			// 返回合并的行数
			return {
				rowspan: count,
				colspan: 1
			};
		} else {
			// 判断当前行的门店名称是否与上一行相同
			const prevShopName = tableData.value[rowIndex - 1].shopName;
			if (row.shopName === prevShopName) {
				// 如果相同，则不显示该单元格
				return {
					rowspan: 0,
					colspan: 0
				};
			}
			// 如果不同，则计算当前门店的行数
			const shopName = row.shopName;
			let count = 1;
			for (let i = rowIndex + 1; i < tableData.value.length; i++) {
				if (tableData.value[i].shopName === shopName) {
					count++;
				} else {
					break;
				}
			}
			return {
				rowspan: count,
				colspan: 1
			};
		}
	}
};
</script>
